$orderWidth: 80px;
$orderMobileWidth: 50px;
$orderRatio: 208px/238px;

.titlebar {
  .titlebar-content {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &::after {
      content: '';
      @include bg-element(400px);
      position: absolute;
      top: 50%;
      right: -15%;
      transform: translateY(-50%) rotateY(180deg);
      opacity: 0.3;
    }
  }

  .t-order {
    display: block;
    width: $orderWidth;
    height: $orderWidth / $orderRatio;
    background-image: image_url('innoawards/2016/order-bg.png');
    background-size: 100% auto;
  }

  .title-cn {
    display: flex;
    align-items: center;
  }

  .t-order {
    display: flex;
    align-items: center;
    color: #fff;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 500;
  }

  .t-label {
    color: #fff;
    font-size: 1.8rem;
    margin-left: 20px;
    line-height: 2;
    border-top: 3px solid $color-brown;
    border-bottom: 3px solid $color-brown;
    letter-spacing: 3px;
  }

  .title-en {
    position: relative;
    z-index: 10;
    font-size: 1.6rem;
    color: $color-brown;
  }
}

@media (max-width:750px) {
  .titlebar {
    .t-order {
      width: $orderMobileWidth;
      height: $orderMobileWidth / $orderRatio;
      font-size: 1.8rem;
    }

    .t-label {
      font-size: 1.3rem;
      margin-left: 10px;
    }

    .titlebar-content:after {
        @include bg-element(220px);
    }

    .title-en {
      font-size: 1.2rem;
    }
  }
}
